<template>
  <div class="home">
    <el-row :gutter="10">
      <el-col :xs="24" :sm="12" :md="6">
        <Card title="今日销售额" :total="homeData.salesToday">
          <div class="today-sales">
            <div>
              <span>日同比 {{ homeData.salesGrowthLastDay }}%</span>
              <el-icon class="today-sales-icon-bottom"><CaretBottom /></el-icon>
            </div>
            <div>
              <span> 月同比 {{ homeData.salesGrowthLastMonth }}%</span>
              <el-icon class="today-sales-icon-top"><CaretTop /></el-icon>
            </div>
          </div>
          <template #footer>
            <div>昨日销售额 ¥ {{ homeData.salesLastDay }}</div>
          </template>
        </Card>
      </el-col>

      <el-col :xs="24" :sm="12" :md="6">
        <Card title="今日订单量" :total="homeData.orderToday">
          <Chart :option="todaySalesOption" />
          <template #footer>
            <div>昨日订单量 ¥ {{ homeData.orderLastDay }}</div>
          </template>
        </Card>
      </el-col>

      <el-col :xs="24" :sm="12" :md="6">
        <Card title="今日交易用户数" :total="homeData.orderUser">
          <Chart :option="todayTradeOption" />
          <template #footer>
            <div>退货率 {{ homeData.returnRate }}%</div>
          </template>
        </Card>
      </el-col>

      <el-col :xs="24" :sm="12" :md="6">
        <Card title="累计用户数" :total="homeData.usersTotal">
          <Chart :option="totalUserOption" />
          <template #footer>
            <span>
              <span>日同比 {{ homeData.userGrowthLastDay }}%</span>
              <el-icon class="today-sales-icon-bottom"><CaretBottom /></el-icon>
            </span>
            <span>
              <span> 月同比 {{ homeData.userGrowthLastMonth }}%</span>
              <el-icon class="today-sales-icon-top"><CaretTop /></el-icon>
            </span>
          </template>
        </Card>
      </el-col>
    </el-row>

    <SalesVisited :data="salesVisitedData" />

    <CategoryRank :data="homeData.saleRank" />

    <BMap />

    <ChinaMap />
  </div>
</template>

<script lang="ts">
export default {
  name: "HomeComp",
};
</script>
<script lang="ts" setup>
import { onMounted, ref, computed } from "vue";
import Card from "./components/Card.vue";
import { CaretBottom, CaretTop } from "@element-plus/icons-vue";
import type { ECOption } from "@/utils/echarts";
import { getHomeDataApi } from "@/api/home";
import SalesVisited from "./components/SalesVisited.vue";
import CategoryRank from "./components/CategoryRank.vue";
import BMap from "./components/BMap.vue";
import ChinaMap from "./components/ChinaMap.vue";

const homeData = ref<any>({});

const salesVisitedData = computed(() => {
  return {
    orderFullYearAxis: homeData.value.orderFullYearAxis,
    orderFullYear: homeData.value.orderFullYear,
    userFullYearAxis: homeData.value.userFullYearAxis,
    userFullYear: homeData.value.userFullYear,
    orderRank: homeData.value.orderRank,
    userRank: homeData.value.userRank,
  };
});

onMounted(async () => {
  const res = await getHomeDataApi();
  homeData.value = res;

  // 今日销售
  (todaySalesOption.value.xAxis as any).data = res.orderTrendAxis;
  (todaySalesOption.value.series as any).data = res.orderTrend;
  // 今日交易
  (todayTradeOption.value.xAxis as any).data = res.orderUserTrendAxis;
  (todayTradeOption.value.series as any).data = res.orderUserTrend;
  // 累计用户数
  (totalUserOption.value.series as any).data = [res.usersLastMonth];
});

// function randomData(num: number, min = 10, max = 100) {
//   const data = [];
//   for (let i = 0; i < num; i++) {
//     data.push(Math.round(Math.random() * (max - min) + min));
//   }
//   return data;
// }

// 今日销售
const todaySalesOption = ref<ECOption>({
  xAxis: {
    data: [],
    show: false,
    boundaryGap: false, // 坐标轴左右不留白
  },
  yAxis: {
    show: false,
  },
  series: {
    type: "line",
    data: [],
    smooth: true, // 曲线
    itemStyle: {
      // 折线拐点
      opacity: 0,
    },
    areaStyle: {
      color: "#a74da7",
      opacity: 1,
    },
    lineStyle: {
      color: "#a74da7",
    },
  },
  grid: {
    top: 5,
    bottom: 0,
    left: 0,
    right: 0,
  },
});
// 今日交易
const todayTradeOption = ref<ECOption>({
  xAxis: {
    data: [],
    show: false,
  },
  yAxis: {
    show: false,
  },
  series: {
    type: "bar",
    data: [],
    itemStyle: {
      color: "#3398db",
    },
    name: "实时交易量",
  },
  grid: {
    left: 0,
    right: 0,
    top: 0,
    bottom: 0,
  },
  tooltip: {
    trigger: "axis",
  },
});
// 累计用户数
const totalUserOption = ref<ECOption>({
  xAxis: {
    show: false,
    min: 0,
    max: 100,
  },
  yAxis: {
    data: ["增长量"],
    show: false,
  },
  series: {
    type: "bar",
    data: [],
    itemStyle: {
      color: "#9acd32",
    },
    name: "用户增长量",
    barWidth: 10,
    showBackground: true,
    label: {
      show: true,
      position: "right",
      formatter: "|",
      color: "#9acd32",
    },
  },
  grid: {
    left: 0,
    right: 0,
    top: 0,
    bottom: 0,
  },
  tooltip: {
    trigger: "axis",
  },
});
</script>

<style scoped>
.home {
  width: 100%;
  height: 100%;
  padding: 20px;
  background-color: #eee;
}

.today-sales {
  font-size: 12px;
  font-weight: 700;
  color: #666;
  > div {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
  }
}

.today-sales-icon-bottom {
  margin-left: 5px;
  color: red;
}
.today-sales-icon-top {
  margin-left: 5px;
  color: green;
}
</style>
